<template>
  <div>
    <Card class="trackShow">

      <Row>
        <i-col>
          <h1 style="font-size:20px;" v-show="searchError">
            <Icon type="information-circled" color="red"></Icon>&nbsp;&nbsp;暂无沿途跟踪记
          </h1>
          <h1 v-show="haveInfo"><span>{{startStationName}}</span>
          </h1>
          <h1 v-show="nohaveInfo">暂无沿途跟踪记</h1>
          <Timeline>
            <template v-for="item in trackOpstion" v-if="item.curPosition">
              <TimelineItem style="height: 50px;">
                {{item.curPosition}}
                <div style="position: absolute;left:200px;" :style="{top:(item.actionTime1?'-10':'0')+'px'}">
                  {{ formatStr(item) }}
                  <template v-if="item.actionTime1"><br/>{{ '本站到达：'+item.actionTime1 }}</template>
                </div>
              </TimelineItem>
            </template>
          </Timeline>
        </i-col>
      </Row>
    </Card>
  </div>
</template>
<script>
  // import { getPositionTrack } from '@api/containerPlatform/containerManagement'
  import { getPositionTrack } from '@api/containerPlatform/logistics'
  import _ from 'lodash'
  import moment from 'moment'

  export default {
    name: 'trackingCode',
    data () {
      let haveInfo = false
      let nohaveInfo = false
      let trackOpstion = []
      let startStationName = ''
      let trackStatusShow = 0
      let searchError = false
      let datas = { trackOpstion, startStationName, trackStatusShow, haveInfo, nohaveInfo, searchError }
      return datas
    },
    props: {
      subOrder: {
        type: Object,
        default () {
          return {}
        }
      },
      containerStateList: {
        type: Array,
        default () {
          return null
        }
      }
    },
    methods: {
      formatStr (item) {
        if (+item.state === 30) {
          return '本站发出：' + item.actionTime
        } else if (+item.state === 32) {
          return '本站到达：' + item.actionTime
        } else if (+item.state === 31) {
          return '本站发出：' + item.actionTime
        }
      },
      tranStateCN (state) {
        let stateList = _.find(this.containerStateList, { 'id': state })
        let showData = ''
        if (stateList) {
          if (stateList.state) {
            showData = stateList.state
          }
        }
        return showData
      },
      trackingCodeSearch () {
        this.searchError = false
        this.haveInfo = false
        this.trackOpstion = []
        let flowId = this.subOrder.id
        // let flowId = '21E5FC43F22A4AB1AFDF9B49005EC592'
        if (flowId) {
          getPositionTrack({ flowId: flowId })
            .then(res => {
              if (+res.data.isSuccess !== 1) {
                this.searchError = true
              } else {
                this.haveInfo = true
                this.nohaveInfo = false
                let trackOpstion = res.data.data
                if (!trackOpstion || trackOpstion.length <= 0) {
                  this.nohaveInfo = true
                } else {
                  // let statusNow = res.data.data.info.status
                  // switch (statusNow) {
                  //   case 1:
                  //     this.trackStatusShow = 1
                  //     break
                  //   case 2:
                  //     this.trackStatusShow = 1
                  //     break
                  //   case 3:
                  //     this.trackStatusShow = 1
                  //     break
                  //   case 4:
                  //     this.trackStatusShow = 2
                  //     break
                  //   case 5:
                  //     this.trackStatusShow = 3
                  //     break
                  //   case 6:
                  //     this.trackStatusShow = 4
                  //     break
                  // }
                  // this.startStationName = res.data.data.info.startStationName
                  // trackOpstion.sort(function (p1, p2) {
                  //   return new Date(p1.time).getTime() - new Date(p2.time).getTime()
                  // })
                  trackOpstion = _.sortBy(trackOpstion, (o) => {
                    return +moment(o.actionTime)
                  })
                  this.trackOpstion = trackOpstion
                  this.startStationName = this.trackOpstion[0].curPosition
                }
              }
            })
        }
      }
    },
    mounted () {
      this.trackingCodeSearch()
    }
  }
</script>
<style>
  .trackShow .ivu-timeline-item-head {
    width: 8px;
    height: 8px;
    background-color: #ddd;
    top: 3px;
    left: 2px;
    border-color: #ddd;
  }

  .ivu-timeline li:first-child .ivu-timeline-item-head {
    width: 8px;
    height: 8px;
    background-color: #FECA2E;
    top: 3px;
    left: 2px;
    border-color: #FECA2E;
  }

  .trackShow .ivu-timeline-item-tail {
    top: 2px;
  }

  .trackShow .ivu-timeline-item-content {
    color: #000000;
  }

  .trackShow .ivu-timeline li:first-child .ivu-timeline-item-content {
    font-weight: bold;
    color: #000000;
  }

  .trackShow .ivu-row {
    background-color: #FAFAF3;
    padding-top: 30px;
  }

  .trackShow .ivu-timeline {
    margin-left: 30px;
    width: 100%;
  }

  .trackShow h1 {
    margin-left: 30px;
    margin-bottom: 30px;
    font-size: 20px;
  }

  .trackShow span {
    color: #000000;
  }

  .trackShow .ivu-steps {
    width: 960px;
    margin-top: 30px;
    margin-left: 60px;
  }
</style>
<style scoped>
  .info_bg {
    background-image: url("../../../../../static/img/img_homebg01.png");
    background-color: #FFFFFF;
    padding-bottom: 20px;
    padding-top: 80px;
  }

  .transportInfo {
    height: 100%;
    margin: 0 auto;
    width: 960px;
  }

  .trackCodeSraech {
    margin-top: 40px;
  }

  .trackCodeSraechBtn {
    margin-left: 10px;
    padding: 5px 15px;
    background-color: #FECA2E;
    border-color: #FFDB59;
  }

  .trackCodeSraechBtn:hover {
    color: #495060;
  }

  .trackStep {
    width: 900px;
    margin: 0 auto;
    height: 80px;
  }

  .trackLineBg {
    width: 900px;
    height: 25px;
  }

  .lightLine {
    float: left;
    width: 90px;
    height: 25px;
    border-bottom: 2px solid #f2f2f2;
  }

  .trackStep .active {
    border-bottom: 2px solid #50e3c2;
  }

  .trackStepContent {
    float: left;
    width: 90px;
    height: 80px;
    background-color: #fff;
  }

  .trackStepContentImgDiv {
    height: 50px;
    width: 90px;
    text-align: center;
  }

  .trackStepContentImgDiv img {
    height: 50px;
  }

  .trackStepState {
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #666;
  }
</style>
